<template>
  <el-menu
    :default-active="route.path"
    :default-openeds="defaultOpeneds"
    class="el-menu-vertical-demo"
  >
    <template v-for="route in routers" :key="route.path">
      <el-menu-item
        :index="route.path"
        @click="onMenuClick(route)"
        v-if="!route.children || route.children.length == 0"
      >
        <el-icon>
          <component :is="route.meta.icon" />
        </el-icon>
        <span>{{ route.name }}</span>
      </el-menu-item>

      <el-sub-menu :index="route.path" v-else>
        <template #title>
          <el-icon>
            <component :is="route.meta.icon" />
          </el-icon>
          <span>{{ route.name }}</span>
        </template>
        <el-menu-item
          :index="childroute.path"
          @click="onMenuClick(childroute)"
          v-for="childroute in route.children"
          :key="childroute.path"
        >
          <el-icon>
            <component :is="childroute.meta.icon" />
          </el-icon>
          <span>{{ childroute.name }}</span>
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script setup>
import { computed, ref, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useAppStore } from "@/stores/app";
import { useAppUserStore } from "@/stores/appUser";
import { getRoutes } from "@/router";

const router = useRouter();
const route = useRoute();
const routers = ref([]);
const appStore = useAppStore();
const appUserStore = useAppUserStore();

//默认展开
const defaultOpeneds = ref(route.matched.map((item) => item.path));

if (routers && routers.value.length > 0) {
  appStore.setPageTitle(routers.value[0].name);
}

const onMenuClick = (item) => {
  if (item.path == "" || (item.children && item.children.length > 0)) return;
  router.push({
    path: item.path,
    query: {
      ...route.query,
    },
  });

  appStore.setPageTitle(item.name);
};

const canPush = (route) => {
  return !(route.meta?.isRequreManager && !appUserStore.currentUser.isManager);
};

const getRouteMenu = (_routes, preRoutePath) => {
  _routes = _routes || routes;

  preRoutePath =
    preRoutePath && preRoutePath.length > 0 ? preRoutePath + "/" : "";

  const menus = [];
  for (let i = 0; i < _routes.length; i++) {
    const route = _routes[i];
    if (route.meta?.isMenu) {
      if (route.children && route.children.length > 0) {
        const children = route.children.filter((r) => r.meta?.isMenu);
        if (children.length == 1) {
          const child = children[0];
          if (!canPush(child)) continue;
          menus.push({
            ...child,
            path: preRoutePath + route.path + child.path,
            name: child.name,
          });
        } else if (children.length > 1) {
          if (!canPush(route)) continue;
          menus.push({
            ...route,
            path: route.path,
            name: route.name,
            children: getRouteMenu(children, preRoutePath + route.path),
          });
        }
      } else {
        if (!canPush(route)) continue;
        menus.push({
          ...route,
          path: preRoutePath + route.path,
          name: route.name,
        });
      }
    }
  }
  return menus;
};

onMounted(() => {
  routers.value = getRouteMenu(getRoutes());
});

watch(
  () => route.routers,
  () => {
    routers.value = getRouteMenu(getRoutes());
  }
);
</script>

<style></style>
